import React,{useState,useEffect, ChangeEvent} from 'react'
import {Wrapper} from './style'
import { NavBar} from 'antd-mobile'
import classnames from 'classnames'
import { Swiper, SwiperSlide } from 'swiper/react';
import { Pagination } from 'swiper';
import 'swiper/css';
import {useNavigate, useLocation} from 'react-router-dom'
import { connect } from 'react-redux'
import { rootState } from '@/store'
import {
  changeInputValue,
  getSwiper,
  getRelevant,
  getRelevantA,
} from '@/store/actionCreators'
import { Footer } from '@/components/footer';

interface HomedetailpicProps {
  inputValue:any,
  list:any[],
  swiperList:any[],
  relevantList:any[],
  changeInputValue:(val:{}) => void,
  getSwiper:() => void,
  getRelevant:() => void,
  getRelevantA:() => void
}
const Homedetailpic:React.FC<HomedetailpicProps> = (props) => {
  const {changeInputValue,getSwiper,getRelevant,getRelevantA} = props
  const {state:{pic,pos,id}} = useLocation()
  const [value, setValue] = useState("")
  const navigate = useNavigate()
  const back = () => navigate(-1)
  const time = new Date();
  const year = time.getFullYear();
  const mounth = time.getMonth()+1;
  const date = time.getDate();
  const {inputValue,list,swiperList,relevantList} = props
  const [show, setShow] = useState(false)
  const changeColor = () => {
    setShow(!show)
  }
  const onAdd = (e:any) => {
    if(e.keyCode===13) {
      console.log(value);
      changeInputValue(value)
      setValue('')
    } 
  }
  const onChange = (e:ChangeEvent<HTMLInputElement>) =>
    setValue(e.target.value)
  useEffect( () => {
    if(!swiperList.length)
    getSwiper()
    if(!relevantList.length && id== 1) {
      getRelevant()
    }
    if( id !== 1) {
      getRelevantA()
    }
     
  },[])
  useEffect(()=> {
    window.scrollTo(0,0)
},[])
  useEffect(()=> {
    setValue(value)
},[value])
  return (
    <Wrapper>
      <NavBar onBack={back} className="top">详情</NavBar>
      <div className="container">
        {/* <img className="container-view"src={pic}/> */}
        <Swiper
          modules={[Pagination]}
          spaceBetween={15}
          slidesPerView={1}
          pagination={{
              bulletClass: 'swiper-pagination-bullet',
              bulletActiveClass: 'swiper-pagination-bullet-active',
              clickable: true,
              type: 'bullets'
          }}
          loop
          >
        {/* <div className="tips">{count}/{swiperList.length}</div> */}
        {
          swiperList.map((item,index) => {
            return (
              <SwiperSlide key={index} >
              <img className="container-view"
              src={index==0?pic:item.url} style={{width:"100%"}} />
                <div className="tips">{index+1}/{swiperList.length}</div>
              </SwiperSlide>
            )
          })
        }
        </Swiper>
        <div className='detail-position'>
          <i className='iconfont icon-dingwei'
            style={{"fontSize":"14px"}}></i>{pos}
        </div>
        <div className='detail-text'>
          -
          <br/>
          《中国国家地理》评选的中国最美海岛No.1，西沙群岛🌊。坐拥最蓝的海，宝石一样的蓝色边疆。
          小学课本的一篇《美丽富饶的西沙群岛》让你我记住了西沙群岛的名字，却对西沙群岛的美📸知之甚少，直到亲眼看到那纯净动人的蓝❗️
          <br/>
          -
          <br/>
          西沙群岛2013年才开放旅游。
          💡划重点，西沙群岛仅限中国🇨🇳公民前往，外籍不可❌。
          其中永兴岛的审核条件更严格。
          <br/>
          -
          <br/>
          ✋如何游览西沙群岛？
          答案是游轮！
          三亚凤凰岛邮轮码头🚢出发，在邮轮上度过四天三晚，途中会停留在知名岛屿，品尝当地美食。
          <br/>
          -
        </div>
        <p className='text-topic'>文中提价</p>
        <div className="rankcontent">
          <div className="image-wrap">
            <img src={pic} alt="" className="image-goods" />
           <div className="bussness-type">
            景点
           </div>
          </div>
          <div className="right-wrap">
            <div className="right-up">
              <div className='right-up-title'>{pos}</div>
              <div className="rax-view">
                <div className="rax-score">4.9分</div>
                <div className="rax-text">12评论</div>
                <div className="rax-line">|</div>
                <div className="rax-text">三沙 西沙</div>
              </div>
              <div className="rax-comment">
                  纯净的天然海域，超美的秘境岛屿，还有未打卡的玻璃海哦
              </div>
              <div className="row">
                <div className="row-flex">纯白的沙滩</div>
                <div className="row-flex">赏绝美日落</div>
              </div>
              <div className="bottom">暂无报价</div>
            </div>
          </div>
        </div>
        <div className="comment">
          <div className="comment-title">
            共2+条评论
          </div>
          <div className="comment-wrap">
            <div className="replay-av">
              <img className="replay-image" src={pic}/>
              <input className='replay-input' 
                value={value}
                onChange={onChange}
                onKeyDown={(e)=>onAdd(e)}
                placeholder='对TA说点什么吧'/>
            </div>
            <div className="replay-av">
              <img className="replay-image" src="https://gw.alicdn.com/sns_logo/i1/2707295640/O1CN01kPuP1g1rXAYeqVZPV_!!2707295640-0-userheaderimgshow.jpg_110x10000Q75.jpg_.webp"/>
              <div className="content-text">是好美想去</div>
              <div className="content-time">2022-7-28</div>
              <div className="content-icon">
                <i className='iconfont icon-xihuan' style={{"fontSize":"20px"}}> </i>
              </div>
            </div>
            <div className="replay-av">
              <img src="https://gw.alicdn.com/sns_logo/i3/O1CN011CPc3Y1d9R9Zq7S9X_!!0-alitrip.jpg_145x145q75s150.jpg_.webp" alt="" className="replay-image" />
              <div className="content-text">好远</div>
              <div className="content-time">2022-6-28</div>
              <div className="content-icon">
                <i className='iconfont icon-xihuan'
                 style={{"fontSize":"20px"}}> </i>
              </div>
            </div>
          {  
            list.map((item,index) => {
              return (
                <div className="replay-av" key={index}>
                <img src={pic} className="replay-image"/>
                <div className="content-text">{item}</div>
                <div className="content-time">{`${year}-${mounth}-${date}`}</div>
                <div className="content-icon">
                  <i className={classnames('iconfont icon-xihuan',{like:show})}
                  onClick={changeColor}
                 style={{"fontSize":"20px"}}> </i>
                </div>
                </div>
              )
            })
          }
          </div>
        </div>
        <div className="text-topic">相关推荐</div>
        <div className="relevant-container">
          { 
            relevantList.map((item,i) => 
              <div className='relevant-list' key={i}>
                <img className="list-img"src={item.pic_r}/>
                <div className="relevant-des">{item.des}</div>
                <div className="relevant-user">
                  <img className='userlogo' src={item.avatar}/>
                  <div className="username">{item.username}</div>
                  <i className='iconfont icon-xihuan like'>{item.count}</i>
                </div>
                <div className="relevant-pos">
                  <i className='iconfont icon-dingwei'
                    style={{"color":"white","fontSize":"12px"}}></i>{pos}
                </div>
              </div>
                
              )
          }
        </div>
      </div>
      <Footer/>
    </Wrapper>
  )
}

export default connect (
  (state :rootState) => ({
    inputValue:state.homedetail.inputValue,
    list: state.homedetail.list,
    swiperList: state.homedetail.swiperList,
    relevantList: state.homedetail.relevantList,
  }),
  {
    changeInputValue,
    getSwiper,
    getRelevant,
    getRelevantA
  }
  )(Homedetailpic)